﻿<phone:PhoneApplicationPage
    x:Class="Conqueror.WP.MatchmakingPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
    xmlns:viewmodel="clr-namespace:Conqueror.WP.ViewModel.Matchmaking"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="False">
    
    <phone:PhoneApplicationPage.Resources>
        <viewmodel:MatchmakingViewModel x:Name="viewmodel" x:Key="viewmodel"/>
        <Storyboard x:Name="ShowFiltersStory">
        	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="filtersOverlay">
        		<DiscreteObjectKeyFrame KeyTime="0">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Visible</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        	</ObjectAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="filtersBlackout">
        		<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="filtersLayout">
        		<EasingDoubleKeyFrame KeyTime="0" Value="260">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ExponentialEase EasingMode="EaseOut"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="260">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ExponentialEase EasingMode="EaseOut"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ExponentialEase EasingMode="EaseOut"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="filtersLayout">
        		<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="HideFiltersStory">
        	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="filtersOverlay">
        		<DiscreteObjectKeyFrame KeyTime="0">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Visible</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        		<DiscreteObjectKeyFrame KeyTime="0:0:0.5">
        			<DiscreteObjectKeyFrame.Value>
        				<Visibility>Collapsed</Visibility>
        			</DiscreteObjectKeyFrame.Value>
        		</DiscreteObjectKeyFrame>
        	</ObjectAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="filtersBlackout">
        		<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.5"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="filtersLayout">
        		<EasingDoubleKeyFrame KeyTime="0" Value="0">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ExponentialEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="260">
        			<EasingDoubleKeyFrame.EasingFunction>
        				<ExponentialEase EasingMode="EaseIn"/>
        			</EasingDoubleKeyFrame.EasingFunction>
        		</EasingDoubleKeyFrame>
        	</DoubleAnimationUsingKeyFrames>
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="filtersLayout">
        		<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource viewmodel}">
        <telerikData:RadJumpList x:Name="radJumpList"
                                 ItemsSource="{Binding Maps}"
                                 GroupPickerItemTap="radJumpList_GroupPickerItemTap"
                                 Margin="6,0" HorizontalContentAlignment="Stretch">
            <telerikData:RadJumpList.ListHeaderContent>
                <StackPanel Margin="6" Width="456">
                    <Grid Height="66" Background="{StaticResource PhoneAccentBrush}">
                        <TextBlock Text="Matchmaking" Foreground="White"
                               FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                               VerticalAlignment="Center" Margin="12,0"/>
                        <Image Source="/Image/Icons/matchmaker.png"
                           HorizontalAlignment="Right"/>
                    </Grid>
                </StackPanel>
            </telerikData:RadJumpList.ListHeaderContent>
            <telerikData:RadJumpList.GroupPickerItemTemplate>
                <DataTemplate>
                    <Border Background="{StaticResource PhoneAccentBrush}"
                            Width="104" Height="104" Margin="6">
                        <TextBlock Text="{Binding}" Foreground="White"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Left"
                                   Margin="6" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                    </Border>
                </DataTemplate>
            </telerikData:RadJumpList.GroupPickerItemTemplate>
            <telerikData:RadJumpList.GroupHeaderTemplate>
                <DataTemplate>
                    <Border Width="104" Height="104" Margin="6"
                            HorizontalAlignment="Left"
                            BorderBrush="{StaticResource PhoneSubtleBrush}"
                            BorderThickness="3">
                        <TextBlock Text="{Binding}" Foreground="{StaticResource PhoneSubtleBrush}"
                                   VerticalAlignment="Bottom" HorizontalAlignment="Left"
                                   Margin="12,6" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                    </Border>
                </DataTemplate>
            </telerikData:RadJumpList.GroupHeaderTemplate>
            <telerikData:RadJumpList.ItemTemplate>
                <DataTemplate>
                    <Grid Width="104" Height="104" Margin="6"
                                  Background="{StaticResource PhoneChromeBrush}"
                                  Tap="SelectMapTap">
                        <Image Source="{Binding Image}" Stretch="UniformToFill">
                            <Image.RenderTransform>
                                <CompositeTransform CenterY="0.5" CenterX="0.5"/>
                            </Image.RenderTransform>
                        </Image>
                        <Border Background="#C8000000"
                                        VerticalAlignment="Top" HorizontalAlignment="Stretch"
                                        Margin="0,12,12,0">
                            <TextBlock Text="{Binding Name}" Foreground="White"
                                               Margin="4,4,0,4" FontSize="14"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </telerikData:RadJumpList.ItemTemplate>
            <telerikData:RadJumpList.GroupPickerItemsPanel>
                <ItemsPanelTemplate>
                    <telerikPrimitives:RadWrapPanel Orientation="Horizontal" Margin="6" ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                                    IsAnimated="True"/>
                </ItemsPanelTemplate>
            </telerikData:RadJumpList.GroupPickerItemsPanel>
        </telerikData:RadJumpList>
        
        <!--<ScrollViewer>
            <StackPanel Margin="12">
                <Grid Height="66" Background="{StaticResource PhoneAccentBrush}"
                      Margin="0,0,0,12">
                    <TextBlock Text="Matchmaking" Foreground="White"
                               FontSize="{StaticResource PhoneFontSizeMediumLarge}"
                               VerticalAlignment="Center" Margin="12,0"/>
                    <Image Source="/Image/Icons/matchmaker.png"
                           HorizontalAlignment="Right"/>
                </Grid>
                
                <TextBlock Text="Choose a map you'd like to join a game on. After that you'll choose the type of game you're looking for. I'll pick out good matches based on your choices."
                           TextWrapping="Wrap"/>
                
                <ItemsControl HorizontalAlignment="Stretch" Margin="-6,6"
                              ItemsSource="{Binding Maps}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <telerikPrimitives:RadWrapPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="105" Height="105" Margin="6"
                                  Background="{StaticResource PhoneChromeBrush}"
                                  Tap="SelectMapTap">
                                <Image Source="{Binding Image}" Stretch="UniformToFill">
                                    <Image.RenderTransform>
                                        <CompositeTransform CenterY="0.5" CenterX="0.5"/>
                                    </Image.RenderTransform>
                                </Image>
                                <Border Background="#C8000000"
                                        VerticalAlignment="Top" HorizontalAlignment="Stretch"
                                        Margin="0,12,12,0">
                                    <TextBlock Text="{Binding Name}" Foreground="White"
                                               Margin="4,4,0,4" FontSize="14"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>-->

        <Grid x:Name="filtersOverlay" Visibility="Collapsed" DataContext="{Binding SelectedMap}" RenderTransformOrigin="0.5,0.5">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="520"/>
            </Grid.RowDefinitions>

            <Rectangle x:Name="filtersBlackout" Fill="{StaticResource PhoneBackgroundBrush}" Opacity="0.5" Grid.RowSpan="2"/>

            <Grid x:Name="filtersLayout" Background="{StaticResource PhoneChromeBrush}" Grid.Row="1" RenderTransformOrigin="0.5,0.4" Opacity="0">
            	<Grid.RenderTransform>
            		<CompositeTransform TranslateY="260"/>
            	</Grid.RenderTransform>
            	<Grid.Projection>
            		<PlaneProjection CenterOfRotationY="1"/>
            	</Grid.Projection>
                <Image Source="{Binding LargeImage}" Stretch="UniformToFill"
                           Opacity="0.25"/>

                <ScrollViewer DataContext="{StaticResource viewmodel}">
                    <StackPanel Margin="12">
                        <Grid Margin="0,0,0,-24">
                            <TextBlock Text="{Binding SelectedMap.Name}" Foreground="{StaticResource PhoneForegroundBrush}"
                                       FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="0,0,-12,0"/>
                        
                            <telerikPrimitives:RadImageButton Click="InspectMapClick" HorizontalAlignment="Right"
                                                              ButtonShape="Ellipse" RestStateImageSource="/Image/Icons/appbar.information.png"
                                                              Margin="0,0,-12,0" Background="{StaticResource PhoneAccentBrush}"
                                                              Foreground="White"/>
                        </Grid>

                        <Grid Margin="0,-6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <telerikPrimitives:RadTextBox InputScope="Number" Margin="-12,0,0,0"
                                                          Header="Number of Players" Watermark="Minimum"
                                                          Text="{Binding MinPlayers, Mode=TwoWay}"/>
                            <TextBlock Text=" to " Grid.Column="1" Margin="0,18"
                                           VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                            <telerikPrimitives:RadTextBox InputScope="Number" Margin="0,0,-12,0" Grid.Column="2"
                                                          Watermark="Maximum" VerticalAlignment="Bottom"
                                                          Text="{Binding MaxPlayers, Mode=TwoWay}"/>
                        </Grid>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Initial Troops" SelectedIndex="{Binding SelectedInitialTroops}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Automatic"/>
                            <telerikInput:RadListPickerItem Content="Manual"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Play Order" SelectedIndex="{Binding SelectedPlayOrder}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Sequential"/>
                            <telerikInput:RadListPickerItem Content="Freestyle"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Game Type" SelectedIndex="{Binding SelectedGameType}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Standard"/>
                            <telerikInput:RadListPickerItem Content="Terminator"/>
                            <telerikInput:RadListPickerItem Content="Assassin"/>
                            <telerikInput:RadListPickerItem Content="Polymorphic"/>
                            <telerikInput:RadListPickerItem Content="Doubles"/>
                            <telerikInput:RadListPickerItem Content="Triples"/>
                            <telerikInput:RadListPickerItem Content="Quadruples"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Spoils" SelectedIndex="{Binding SelectedSpoils}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Escalating"/>
                            <telerikInput:RadListPickerItem Content="Flat Rate"/>
                            <telerikInput:RadListPickerItem Content="Nuclear"/>
                            <telerikInput:RadListPickerItem Content="Zombie"/>
                            <telerikInput:RadListPickerItem Content="No Spoils"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Reinforcements" SelectedIndex="{Binding SelectedFortifications}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Chained"/>
                            <telerikInput:RadListPickerItem Content="Adjacent"/>
                            <telerikInput:RadListPickerItem Content="Unlimited"/>
                            <telerikInput:RadListPickerItem Content="Parachute"/>
                            <telerikInput:RadListPickerItem Content="No Reinforcements"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Fog of War" SelectedIndex="{Binding SelectedFogOfWar}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Yes"/>
                            <telerikInput:RadListPickerItem Content="No"/>
                        </telerikInput:RadListPicker>

                        <telerikInput:RadListPicker InlineModeThreshold="10" Margin="0"
                                                    Header="Trench Warefare" SelectedIndex="{Binding SelectedTrenchWarfare}">
                            <telerikInput:RadListPickerItem Content="Don't Care"/>
                            <telerikInput:RadListPickerItem Content="Yes"/>
                            <telerikInput:RadListPickerItem Content="No"/>
                        </telerikInput:RadListPicker>

                        <Grid Margin="0,6,0,-6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Button Content="cancel" Margin="-12,0,-6,0"
                                    Click="CancelFiltersClick"/>
                            <Button Content="find games" Margin="-6,0,-12,0" Grid.Column="1"
                                    Click="FindGamesButtonClick"/>
                        </Grid>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>